<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<#include "common/head.ftl">

<body class="signin">
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column" style="color:#000;">
            <div class="modal fade" id="Entity" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="myModalLabel">
                                初始化密码
                            </h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">邮箱</label>
                                    <div class="col-sm-10">
                                        <input type="email" class="form-control" name="email"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">角色</label>
                                    <div class="col-sm-10">
                                        <label class="radio-inline">
                                            <input type="radio" name="role" value="1" style="margin-top: 2px;"> 管理员
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="role" value="2" style="margin-top: 2px;"> 记录员
                                        </label>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary">确认</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<#include "common/modal.ftl">
<div class="signinpanel">
    <div class="row">
        <div class="col-sm-7">
            <div class="signin-info">
                <div class="logopanel m-b">
                    <h1>会务宝系统</h1>
                </div>
                <br>
                <div class="m-b"></div>
                <h4>欢迎来到<strong>会务宝系统</strong></h4>
            </div>
        </div>
        <div class="col-sm-5">
            <form class="loginForm" action="${basePath+loginProcessRecorderUrl}">
                <head>
                    <span style="display:inline;margin:0;padding:0"><strong>登陆:</strong></span>
                    <span style="float:right"><a style="text-decoration:none;color:#FF8888"
                                                 href="${basePath+registerUrl}"><strong>注册</strong></a></span>
                </head>
                <p class="m-t-md">登录到你的会务宝系统账号</p>
                <p class="m-t-md" id="error" style="color:red;"></p>
                <input name="username" type="text" class="form-control uname m-b" placeholder="用户名" required="true"/>
                <input name="password" type="password" class="form-control pword m-b" placeholder="密码" required="true"/>
                <input name="imageCode" type="text" class="form-control m-b" placeholder="验证码" required="true"
                       style="display:inline-block;color:#000;width:50%;"/>
                <img src="${basePath}/loginAndRegister/code/image" alt="" style="display:inline-block;cursor:pointer;">
                <div class="checkbox">
                    <label><input type="checkbox" id="manager" style="transform: translateY(50%);"/>管理员登录</label>
                    <label class="pull-right"><input type="checkbox" id="save" style="transform: translateY(50%);"/>记住我</label>
                </div>
                <button type="button" id="login" class="btn btn-success btn-block">登录</button>
                <a href="#" id="forgetPassword"
                   style="cursor:pointer;text-decoration:none;float: right;padding:7px 0px;">忘记密码了</a>
            </form>
        </div>
    </div>
    <div class="signup-footer">
        <div class="pull-left">
            &copy; 2015 All Rights Reserved.
        </div>
    </div>
</div>
</body>

<script src="${basePath}/js/jquery.min.js"></script>
<script src="${basePath}/js/bootstrap.min.js"></script>
<script src="${basePath}/js/common.js"></script>
<script>
    $("#forgetPassword").click(function () {
        $("#Entity").modal("show");
    })
    $("#Entity").find(".modal-footer button:last").click(function () {
        var param = getFormData($("#Entity").find("form"));
        param.role = $("[name='role']:checked").val();
        var othis = this;
        $(othis).prop("disabled", true);
        AsyncPost("${basePath}/loginAndRegister/forgetPassword", param, function (value) {
            if (value.code != 0) {
                ErrMessage(value.msg).css({"color": "#000"});
            } else {
                ShowMessage(value.msg).css({"color": "#000"});
                $("#Entity").modal("hide");
            }
            $(othis).prop("disabled", false);
        })
    })
    $("#manager").change(function () {
        if ($(this).prop("checked") == true) {
            $("form").attr("action", "${basePath+loginProcessManagerUrl}");
        } else {
            $("form").attr("action", "${basePath+loginProcessRecorderUrl}");
        }
    })
    if (localStorage.rememberMe && localStorage.rememberMe == "1") {
        $("[name='username']").val(localStorage.username);
        $("[name='password']").val(localStorage.password);
        if (localStorage.manager && localStorage.manager == "true") {
            $("#manager").prop("checked", localStorage.manager).change();
        }
        $("#save").prop("checked", true);
    }
    $("img").click(function () {
        $(this).attr("src", "${basePath}/loginAndRegister/code/image?date=" + new Date().getTime());
    })
    $(document).ready(function () {
        $("#login").click(function () {
            $("#login").prop("disabled", true);
            var url = $(".loginForm").attr("action");
            var username = $("[name='username']").val();
            var password = $("[name='password']").val();
            var imageCode = $("[name='imageCode']").val();
            if ($("#save").prop("checked") == true) {
                localStorage.username = username;
                localStorage.password = password;
                localStorage.manager = $("#manager").prop("checked");
                localStorage.rememberMe = 1;
            } else {
                localStorage.username = null;
                localStorage.password = null;
                localStorage.manager = false;
                localStorage.rememberMe = 0;
            }
            AsyncPost(url, {username: username, password: password, imageCode: imageCode}, function (result) {
                if (result.code == 0) {
                    window.location.href = "${basePath}/function/main";
                } else {
                    $("#login").prop("disabled", false);
                    $("#error").text(result.msg);
                }
            })
        });
    });
</script>
</html>
